<template>
	<view class="progress"
		:style="`--progress: ${progress > 100 ? 100:progress}%;--color: ${color};--scale: ${scale};--size: ${size}`">
		<view class="progress_wave"></view>
		<view class="progress_number">{{progress}}</view>
	</view>
</template>

<script setup>
	defineProps({
		progress: {
			type: Number,
			default: 30
		},
		color: {
			type: String,
			default: "#6495ED"
		},
		size: {
			type: String,
			default: "180rpx"
		},
		scale: {
			type: Number,
			default: 1
		}
	})
</script>

<style lang="scss" scoped>
	/* 定一个旋转动画 用于实现波浪效果 */
	@keyframes progressRotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	/* 设置外层元素样式 */
	.progress {
		position: relative;
		width: var(--size);
		height: var(--size);
		border-radius: 50%;
		background: #fff;
		/* 最关键的属性 */
		overflow: hidden;
		transform: scale(var(--scale));
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .06);

		/* 设置进度条样式 */
		&_wave {
			position: absolute;
			/* 波浪占据外层圆形区域的百分比 由 --progress控制 */
			top: calc(100% - var(--progress));
			left: -100%;
			// transform: translateX(-100%);
			z-index: 9;
			width: 300%;
			height: 300%;
			border-radius: 36%;
			background: var(--color);
			/* 添加旋转动画效果 */
			animation: progressRotate 6s linear infinite;
			/* 由于上面使用了transform 且动画中也使用了transform 设置该属性使其叠加生效 */
			animation-composition: add;
		}

		/* 设置进度数字样式 */
		&_number {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			margin: 0;
			font-size: 50rpx;
			width: 180rpx;
			height: 180rpx;
			line-height: 180rpx;
			background: #fff;
			border-radius: 50%;
			text-align: center;
			color: var(--color);
			&::after{
				content: "%";
				font-size: 28rpx;
			}
		}
	}
</style>